<link rel="stylesheet" href="/static/css/back_article_comm.css">
<style>
    .article-panel .input-group .input-group-addon {
        background-color: #eee;
        border-radius: 4px 0 0 4px;
    }

    .article-panel input.disabled {
        background-color: #fff !important;
    }

    .article-panel table td .btn .fa-sort-desc {
        position: relative;
        top: -4px;
        left: 4px;
    }
</style>
<div class="panel panel-info article-panel">
    <div class="panel-heading">
        <a class="btn btn-success table-filter"><i class="fa fa-filter fa-md"></i> 筛 选</a>
        <a class="btn btn-success table-reset" style="display: none;"><i class="fa fa-refresh fa-md"></i> 重置条件</a>
        <a href="../page/article/addArticle.html" target="_blank" class="btn btn-success add"><i
                class="fa fa-plus fa-md"></i> 发布文章</a>
    </div>
    <div class="panel-body" style="display: none;">
        <form class="bs-example bs-example-form" role="form">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <span class="input-group-addon">文章标题</span>
                    <input type="text" id="title" class="form-control" placeholder="请输入关键字...">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default ztreeBtn">
                            所属菜单
                            <span class="caret"></span>
                        </button>
                        <div class="ztreeContainer dropdown-menu" id="menuTree" style="display: none;">
                            <ul class="ztree" id="ztree"></ul>
                        </div>
                    </div>
                    <input type="text" class="form-control " readonly id="menu" placeholder="请选择所属菜单...">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle inputBtn">
                            状态
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a data="1">已经发布</a></li>
                            <li><a data="0">保存未发布</a></li>
                            <li><a data="2">暂停发布</a></li>
                            <li><a data="-1">回收站</a></li>
                        </ul>
                    </div>
                    <input type="text" id="status" readonly class="form-control">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle inputBtn">
                            是否可演示
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a data="1">是</a></li>
                            <li><a data="0">否</a></li>
                        </ul>
                    </div>
                    <input type="text" id="is_demo" readonly class="form-control">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle inputBtn">
                            是否能下载
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a data="1">是</a></li>
                            <li><a data="0">否</a></li>
                        </ul>
                    </div>
                    <input type="text" id="is_download" readonly class="form-control">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle inputBtn">
                            文章类型
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a data="3">普通文章</a></li>
                            <li><a data="2">留言板</a></li>
                            <li><a data="1">关于我</a></li>
                        </ul>
                    </div>
                    <input type="text" id="type" readonly class="form-control">
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 table-filter-time">
                <div class="input-group">
                    <span class="input-group-addon hidden-sm hidden-xs">发布时间</span>
                    <input type="text" id="startTime" class="form-control startTime" placeholder="发布开始时间...">
                </div>
                <div class="input-cut">至</div>
                <div class="input-group">
                    <input type="text" id="endTime" class="form-control endTime" placeholder="发布结束时间...">
                </div>
            </div>
        </form>
    </div>
    <table class="table table-hover  table-condensed" id="article-table">
        <thead>
        <tr>
            <th style='display:none;'>id</th>
            <th>文章标题</th>
            <th>所属菜单</th>
            <th class="hidden-xs">Banner</th>
            <th style='display: none;'>正面描述信息</th>
            <th>创建时间</th>
            <th>演示</th>
            <th>下载</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--<tr>
            <td>1</td>
            <td>自动名片识别系统</td>
            <td>java</td>
            <td>可以用微信和、QQ和手机扫一扫添加联系人的二维码名片识别系统</td>
            <td>2018-04-29</td>
            <td class="table-operate">
                <span class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                   <a class="btn btn-danger opt-del dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
                            操作<i class="fa fa-sort-desc fa-lg"></i>
                   </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                      <li role="presentation" >
                         <a role="menuitem" tabindex="-1" href="#">立即发布</a>
                      </li>
                      <li role="presentation">
                         <a role="menuitem" tabindex="-1" href="#">暂停发布</a>
                      </li>
                      <li role="presentation">
                         <a role="menuitem" tabindex="-1" href="#">删除</a>
                      </li>
                   </ul>
                </span>
                <span class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><a class="btn btn-warning"><i class="fa fa-edit fa-md"></i> 编辑 </a></span>
                <span class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><a class="btn btn-primary"><i class="fa fa-navicon fa-md"></i> 预览 </a></span>
            </td>
        </tr>-->
        </tbody>
    </table>
</div>
<div class="table-page text-center">
    <ul class="pagination">
        <li class="page-prev disabled"><a href="javascript:void(0)">&laquo;</a></li>
        <!--<li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>-->
        <li class="page-next"><a href="javascript:void(0)">&raquo;</a></li>
    </ul>
</div>
<script src="/static/js/back_article_comm.js"></script>
<script src="/static/js/back_article_index.js"></script>
<script>
    $(function () {
        loadArticleList(true);//加载文章清单
        loadNavBarTree();//加载菜单信息
        $(document).off(".search").on("keydown.search", keyDownSearch);//添加键盘事件
        $(".article-panel a.table-filter").click(tableFilterClick);//我的文章 条件筛选按钮事件
        $(".article-panel a.table-reset").click(tableFilterResetClick);//重置筛选条件
        $(".article-panel .panel-body form input[readonly]").dblclick(resetDataClick);//双击重置数据
        $(".article-panel .ztreeBtn,.panel .inputBtn").click(ztreeBtnClick);//条件筛选 选择所属菜单单机事件
        $(".article-panel .dropdown-menu").mouseenter(dropdownMenuMouseEnter).mouseleave(dropdownMenuMouseLeave);//下拉菜单事件
        $(".table-page ul.pagination").on("click", "li", {name: "article"}, pagingEvent);//我的文章 分页事件
        $(".article-panel table").on("click", "td.table-operate a.opt-status", operateBtnClick);//操作按钮  状态下拉菜单
        $(".article-panel table").on("click", "td.table-operate ul a", statusBtnClick)//操作 状态按钮事件
        $(".article-panel table").on({"mouseleave": optUlMouseleave}, "td.table-operate ul");//操作栏鼠标移除事件
        $(".article-panel .panel-body ul.dropdown-menu li a").click(dropdownMenuClick)//条件查询下拉菜单单内容机事件
    })
</script>